Transcrição
Nós vimos como importar CSS direto da pasta node_modules, considerando-o como um módulo. Fizemos tudo isso com a mágica dos loaders.
Mas se quisermos importar o CSS que não está na pasta node_modules, por exemplo, um arquivo gerado por mim. Vamos criar um arquivo novo, que receberá o nome meucss.css, dentro da pasta css:
table {
box-shadow: 5px 5px 5px black
}Como faremos para que este CSS seja aplicado assim no momento do carregamento. No app.js, adicionaremos um import:
import { NegociacaoController } from './controllers/NegociacaoController.js';
import { Negociacao } from './domain/index.js';
import 'booststrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
import 'css/meucss.css';Porém, dá forma como elaboramos o código, ele acreditará que estamos procurando um módulo dentro de node_modules. No entanto, queremos acessar a pasta css. Teremos que especificar isso no caminho adicionando ../:
import '../css/meucss.css';O próximo passo ser colocar o servidor do webpack-dev_server para rodar, recarregaremos a página, e teremos adicionado uma sombra na lateral da tabela.
Em uma aplicação que trabalhamos com componentes - que não é uma o nosso caso -, cada um deles pode importar os módulos, tanto JS como CSS, que são suas dependências. Desta forma, ao analisarmos um componente, fica claro do que ele depende, inclusive a parte do estilo.
Porém, existe algo curioso que mostraremos mais adiante.